<template>
  <div class="questionStyle">
    <!--技术库选择-->
    <a-modal
      title="选择关联技术库"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div style="width: 250px; margin-bottom: 20px">
        <a-input-search placeholder="输入代码或者名称查询" enter-button v-model="searchWord" @search="searchTech" />
      </div>
      <a-table
        :row-selection="rowSelection"
        :columns="techColumns"
        bordered
        :pagination="false"
        :data-source="techData"
        size="small"
        :key="freshKey"
      >
      </a-table>
    </a-modal>
    <li v-for="(items, indexs) in questionListData" :key="indexs" :id="items.questionNum">
      <div class="question-content">
        <h3>
          <b>{{ items.bigType }}</b>
        </h3>
        <div>
          <span class="question-num">{{ items.orderNum }}</span>
          <h4>
            {{ items.question }}<i>({{ items.questionType | formatquestionType }}题)</i><i v-if="!!items.requiredFlag" style="color: red">(必答题)</i>
          </h4>
          <a-button type="primary" style="margin-left: 10px" @click="clearnQuestion(items)">清理答题</a-button>
        </div>
        <div class="question-detail">
          <div v-show="showMemo(items.questionMemo)||!!items.memoAttachId" class="question-atten">
            <img src="@/assets/attention-red.png" alt="" />
            <span>{{ items.questionMemo }}</span><span style="margin-left: unset;cursor: pointer;" v-show="!!items.memoAttachId">具体请查阅：<a title="点击查阅说明文件" style="color: red;font-weight: bolder;" @click="showAttach({id:items.memoAttachId,uploader:curUser,fileName:items.memoAttachName})">{{'【'+items.memoAttachName+'】'  }}</a></span>
          </div>
          <!-- 关联技术库题 -->
          <div class="technology" v-show="items.relateTechnologyLibFlag">
            <div class="technology-header">
              <ul class="leftSide">
                <li>
                  <img src="@/assets/total.png" alt="" />
                  <span>共:{{ items.technologyList == null ? 0 : items.technologyList.length }}条</span>
                </li>
                <li>
                  <img src="@/assets/circle.png" alt="" />
                  <span>一级:{{ items.levelOne == null ? 0 : items.levelOne }}条</span>
                </li>
                <li>
                  <img src="@/assets/circle.png" alt="" />
                  <span>二级:{{ items.levelTwo == null ? 0 : items.levelTwo }}条</span>
                </li>
              </ul>
              <div class="rightSide">
                <a-button type="primary" @click="addTech(items)">添加</a-button>
                <a-button type="primary" class="deleteStyle" @click="delTech(items)">删除</a-button>
              </div>
            </div>
            <a-table
              :row-selection="delRowSelection(items)"
              :columns="techColumns"
              bordered
              :pagination="true"
              :data-source="items.technologyList"
              size="small"
            ></a-table>
          </div>

          <!-- 单选题 -->
          <a-radio-group
            v-show="!items.relateTechnologyLibFlag && items.questionType === 1"
            v-model="items.singleChoice"
            @change="nextQuestionChange(items)"
          >
            <div v-for="(i, v) in items.optionVoList"  style="display:flex">
              <a-radio :key="v" :value="i.id">
                {{ i.optionContent }}
              </a-radio>
              <div v-show="showMemo(i.optionMemo)" class="question-atten  memo-cls">
                <span>(</span>
                <span>{{ i.optionMemo }}</span>
                <span>)</span>
              </div>
            </div>
          </a-radio-group>

          <!-- 多选题 -->
          <a-checkbox-group
            style="display: flex; flex-direction: column; margin-bottom: 10px"
            v-show="!items.relateTechnologyLibFlag && items.questionType === 2"
            v-model="items.multipleChoice" @change="questChange()"
          >
            <div v-for="(i, v) in items.optionVoList"  style="display:flex">
              <a-checkbox style="margin-left: 8px" :key="v" :value="i.id">
                {{ i.optionContent }}
              </a-checkbox>
              <div v-show="showMemo(i.optionMemo)" class="question-atten  memo-cls">
                <span>(</span>
                <span>{{ i.optionMemo }}</span>
                <span>)</span>
              </div>
            </div>
          </a-checkbox-group>

          <!-- 填空题 -->
          <a-input
            v-show="
              !items.relateTechnologyLibFlag &&
              items.questionType === 3 &&
              (items.textType === 1 || items.textType == null)
            "
            v-model="items.answerValue" @change="questChange()"
            placeholder="请输入你的答案"
          />
          <a-input-number
            v-show="!items.relateTechnologyLibFlag && items.questionType === 3 && items.textType === 2"
            :precision="0"
            v-model="items.answerValue" @change="questChange()"
            placeholder="请输入你的答案"
          />
          <a-input-number
            v-show="!items.relateTechnologyLibFlag && items.questionType === 3 && items.textType === 3"
            v-model="items.answerValue" @change="questChange()"
            placeholder="请输入你的答案"
          />

          <!-- 判断题 -->
          <a-radio-group
            v-show="!items.relateTechnologyLibFlag && items.questionType === 4"
            v-model="items.trueOrFalse"
            @change="nextQuestionChange(items)"
          >
            <div v-for="(i, v) in items.optionVoList"  style="display:flex">
              <a-radio :key="v" :value="i.id">
                {{ i.optionContent }}
              </a-radio>
              <div v-show="showMemo(i.optionMemo)" class="question-atten  memo-cls">
                <span>(</span>
                <span>{{ i.optionMemo }}</span>
                <span>)</span>
              </div>
            </div>
          </a-radio-group>

          <!-- 说明题 -->
          <!-- <a-input type="textarea" v-model="items.answerMemo"  :class="items.needAnswerMemoFlag && !items.answerMemo?'requiredColor':''"  placeholder="请输入详细说明" /> -->
          <a-textarea
            v-model="items.answerMemo"
            :class="items.needAnswerMemoFlag && !items.answerMemo ? 'requiredColor' : ''"
            placeholder="请输入详细说明" @change="questChange()"
            :auto-size="{ minRows: 2 }"
          />

          <!-- 上传附件 -->
          <div v-if="!items.relateTechnologyLibFlag && items.needAttachFlag" style="display: flex">
            <ht-upload
              :ref="items.id"
              class="upload-demo"
              multiple
              dbKey="Trd"
              :busField="busFieldVal"
              :busKey="busKeyVal ? busKeyVal : projectBuildId"
              :busType="String(items.id)"
              :show-file-list="false"
              ftpKey="ftp"
              v-model="items.fileList"
            >
              <el-button size="small" type="primary" @change="questChange">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传图片文件，且不超过2M</div>
            </ht-upload>
            <div class="upload-list">
              <a-row v-for="file in items.fileList" :key="file.id">
                <a @click="showAttach(file)">&nbsp;&nbsp;{{ file.fileName }}&nbsp;&nbsp;</a>
                <a @click="showAttach(file)">{{ file.uploadTime }}</a>
                <a-icon
                  type="delete" 
                  v-if="busFieldVal.indexOf('Change')==-1"
                  style="text-indent: 1em; color: #1890ff; cursor: pointer"
                  @click="delFile(items.id, file.id)"
                />
                <a-icon
                  type="download" 
                  style="text-indent: 1em; color: #1890ff; cursor: pointer"
                  @click="downLoadAttach(file)"
                />
              </a-row>
            </div>
          </div>
        </div>
      </div>
    </li>

    <a-modal title="温馨提示" :visible="confirmVisible" @ok="confirmClearnOk" @cancel="confirmClearnCancel">
      <p>亲，当前修改的题目涉及到后面题目的跳转题目，如需修改将会清空后面已作答过的题目，请确认是否清空。</p>
    </a-modal>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { USER_INFO } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'QuestionCoreList',
  components: {
  },
  props: {
    questionListData: {
      Type: Array,
      default: () => [],
    },
    projectBuildId: {
      Type: String,
      default: '',
    },
    nextQuestionId: {
      Type: Number,
      default: 0,
    },
    busFieldVal: {
      Type: String,
      default: '',
    },
    busKeyVal:{
      Type: String,
      default: ''
    }
  },
  data() {
    return {
      searchWord: '',
      url: {
        searchTechList: '/rad/technology/queryListByCodeOrName',
      },
      techColumns: [
        {
          title: '技术编号',
          dataIndex: 'code',
          align: 'center',
          scopedSlots: { customRender: 'code' },
        },
        {
          title: '技术名称',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '技术等级',
          dataIndex: 'techLevel',
          align: 'center',
        },
      ],
      addTechQuestion: null,
      currSelectTechIds: [],
      currSelectTechs: [],
      techData: [],
      visible: false,
      confirmLoading: false,
      freshKey: 0,
      confirmVisible: false,
      confirmQuestion: null,
      curUser:Vue.ls.get(USER_INFO).username,
    }
  },
  mounted() {},
  watch: {},
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.currSelectTechIds = selectedRowKeys
          this.currSelectTechs = selectedRows
        },
      }
    },
  },
  methods: {
    questChange(){
      this.$emit('questChange')
    },
    delFile(questionId, fileId) {
      var param = {
        dbKey: 'Trd',
        id: fileId,
        ftpKey: 'ftp',
        busField: 'ProjectBuildValue',
      }
      this.$refs[questionId][0].delete(param)
    },
    showAttach(file) {
      this.$emit('showAttach', file)
    },
    downLoadAttach(file){
      this.$emit('downLoadAttach', file)
    },
    showMemo(field) {
      if (field == null || field == undefined || field.trim().length == 0) {
        return false
      }
      return true
    },
    addTech(item) {
      ++this.freshKey
      this.searchWord = ''
      this.techData = []
      this.currSelectTechIds = []
      this.currSelectTechs = []
      this.addTechQuestion = item
      this.visible = true
    },

    delRowSelection(item) {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          item.delIds = selectedRowKeys
        },
      }
    },
    delTech(item) {
      if (item.delIds == null || item.delIds == '') {
        this.$message.warning('请选择要删除的科技信息')
        return
      }
      var len = item.technologyList.length - 1
      for (var i = len; i >= 0; i--) {
        var tech = item.technologyList[i]
        if (item.delIds.indexOf(tech.key) > -1) {
          item.technologyList.splice(i, 1)
          item.techIds.splice(i, 1)
          if (tech.techLevel == '一级') {
            item.levelOne--
          }
          if (tech.techLevel == '二级') {
            item.levelTwo--
          }
        }
      }
    },
    handleOk(e) {
      this.confirmLoading = true
      this.visible = false
      if (this.addTechQuestion.techIds == null) {
        this.addTechQuestion.techIds = this.currSelectTechIds
      } else {
        this.currSelectTechIds.forEach((currTechId) => {
          if (this.addTechQuestion.techIds.indexOf(currTechId) == -1) {
            this.addTechQuestion.techIds.push(currTechId)
          }
        })
      }
      if (this.addTechQuestion.technologyList == null) {
        this.addTechQuestion.technologyList = this.currSelectTechs
      } else {
        this.currSelectTechs.forEach((currTech) => {
          var flag = true
          this.addTechQuestion.technologyList.forEach((tech) => {
            if (tech.key == currTech.key) {
              flag = false
            }
          })
          if (flag) {
            this.addTechQuestion.technologyList.push(currTech)
          }
        })
      }
      //统计一级/二级数量
      var levelOne = 0
      var levelTwo = 0
      this.addTechQuestion.technologyList.forEach((tech) => {
        if (tech.techLevel == '一级') {
          levelOne++
        }
        if (tech.techLevel == '二级') {
          levelTwo++
        }
      })
      this.addTechQuestion.levelOne = levelOne
      this.addTechQuestion.levelTwo = levelTwo
      this.confirmLoading = false
      this.questChange()
    },
    handleCancel(e) {
      this.visible = false
    },
    searchTech() {
      if (this.searchWord == '') {
        this.$message.warning('请输入关键字进行查询 ')
        return
      }
      getAction(this.url.searchTechList + '?codeOrName=' + this.searchWord).then((res) => {
        this.techData = []
        if (res.success) {
          var data = res.result
          if (data != null) {
            data.forEach((item) => {
              this.techData.push({
                key: item.id,
                code: item.code,
                name: item.name,
                techLevel: item.techLevel,
              })
            })
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //跳转题监测
    nextQuestionChange(item) {
      var val = this.getVal(item)
      var optionVoList = item.optionVoList
      if (this.isJumpQuestion(optionVoList)) {
        for (var i = 0; i < optionVoList.length; i++) {
          var option = optionVoList[i]
          if (option.id == val) {
            this.$emit('jumpNextPage', item.id, option.id)
          }
        }
      }
      this.questChange()
    },
    //判断是否为包含跳转题目
    isJumpQuestion(optionVoList) {
      var isJump = false
      if (optionVoList == null || optionVoList.length < 1) {
        return isJump
      }
      optionVoList.forEach((option) => {
        if (option.jumpQuestionId != null) {
          //包含跳转的，为一页
          isJump = true
        }
      })
      return isJump
    },
    //获取题目的值
    getVal(quest) {
      if (quest.questionType == 1) {
        return quest.singleChoice
      }
      if (quest.questionType == 4) {
        return quest.trueOrFalse
      }
      return null
    },
    //清理答题
    clearnQuestion(question) {
      var hadJump = false
      var val = this.getVal(question)
      if (val != null && val > 0) {
        question.optionVoList.forEach((option) => {
          if (option.id == val && option.jumpQuestionId != null && option.jumpQuestionId > 0) {
            //包含跳转的，为一页
            hadJump = true
          }
        })
      }
      if (hadJump) {
        this.confirmVisible = true
        this.confirmQuestion = question
      } else {
        this.$emit('clearnQuestion', question.id)
        if (question.needAttachFlag && this.busFieldVal.indexOf('Change')==-1) {
          this.$refs[question.id][0].clearFiles()
        }
      }
      this.questChange()
    },
    confirmClearnOk() {
      this.confirmVisible = false
      this.$emit('clearnQuestion', this.confirmQuestion.id)
      if (this.confirmQuestion.needAttachFlag && this.busFieldVal.indexOf('Change')==-1) {
        this.$refs[this.confirmQuestion.id][0].clearFiles()
      }
    },
    confirmClearnCancel() {
      this.confirmVisible = false
    },
  },
  filters: {
    formatquestionType(type) {
      switch (type) {
        case 1:
          return '单选'
        case 2:
          return '多选'
        case 3:
          return '填空'
        case 4:
          return '判断'
        default:
          break
      }
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-radio-wrapper {
  white-space: unset;
  display: flex;
  align-items: center;
  & /deep/.ant-radio-wrapper-checked {
    display: flow-root;
  }
  & /deep/.ant-radio {
    padding-top: 3px;
  }
}
.memo-cls > span{
   margin-left: 5px !important;
   color:#faad14;
}
.requiredColor {
  /deep/ &.ant-input {
    border-color: red;
  }
}
.questionStyle {
  padding: 10px 0;
  // margin-left:201px;
  > li {
    list-style: none;
    display: flex;
    min-width: 950px;
    background-color: #fff;
    padding: 1.5%;
    margin-bottom: 15px;
    border: 1px solid #ededed;
  }
  .btnBox {
    text-align: center;
    display: block;
    background: unset;
    border: unset;
    & /deep/ .ant-btn {
      border: unset;
      border-radius: unset;
      margin: 0 20px;
      width: 150px;
    }
    & /deep/ .ant-btn-primary {
      background-color: #24508c;
    }
  }
  .question-num {
    width: 25px;
    height: 25px;
    background-color: #48b685;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 25px;
    // margin-right: 10px;
    display: inline-block;
  }
  .question-content {
    line-height: 30px;
    width: 100%;
    h4 {
      font-size: 15px;
      margin-left: 10px;
      margin-bottom: 0;
      font-weight: 600;
      display: inline-block;
      i {
        font-style: normal;
        color: #a8a8a8;
        display: inline-block;
        margin-left: 10px;
      }
    }
    /deep/ .ant-input-number {
      width: inherit;
      margin: 5px 0;
    }
    .question-detail {
      padding-left: 40px;
    }
    .question-atten {
      position: relative;
      margin-bottom: 8px;
      display: flex;
      // justify-content: center;
      align-items: center;
      line-height: 1;
      img {
        position: absolute;
        top: -1px;
        left: 0;
      }
      span {
        margin-left: 20px;
        // color: #b9b9b9;
        font-size: 12px;
        // white-space: nowrap;
        line-height: 1.2;
      }
    }
  }
  .upload-demo {
    display: flex;
    align-items: center;
    line-height: 1;
    & /deep/ .el-button--primary {
      background-color: #4790bb;
      border-color: #4790bb;
      margin: 5px 10px 0 0;
    }
    & /deep/ .el-upload-list {
      display: flex;
      align-items: center;
      .el-upload-list__item {
        margin-top: 5px;
      }
    }
    & /deep/ .el-upload__tip {
      display: none;
    }
  }
  .technology {
    .technology-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      .leftSide {
        text-align: left;
        display: flex;
        padding: 0;
        > li {
          list-style: none;
          margin-right: 15px;
          > img {
            margin-right: 2px;
            margin-top: -2px;
          }
        }
      }
      .rightSide {
        text-align: right;
      }
    }
    & /deep/ .ant-btn-primary {
      background-color: #548fb1;
      border-color: #548fb1;
      border-radius: unset;
      width: 100px;
      margin-left: 5px;
    }
    &/deep/ .ant-btn-primary.deleteStyle {
      background-color: #45b784;
      border-color: #45b784;
    }
  }
}
</style>